var vm = new Vue({
    el: '#app',
    data: {
        host: HOST,
        username: sessionStorage.username || localStorage.username,
        user_id: sessionStorage.user_id || localStorage.user_id,
        token: sessionStorage.token || localStorage.token,
        contents: '',
        count: 1,
        page_size: 6,
        page: 1,
        tag_id: 0,
        tagDetail: '',
        tab: 'questions',
        show: '',
        is_focus: false
    },
    computed: {
        total_page: function () {  // 总页数
            return Math.ceil(this.count / this.page_size);
        },
        next: function () {  // 下一页
            if (this.page >= this.total_page) {
                return 0;
            } else {
                return this.page + 1;
            }
        },
        previous: function () {  // 上一页
            if (this.page <= 0) {
                return 0;
            } else {
                return this.page - 1;
            }
        },
        page_nums: function () {  // 页码
            // 分页页数显示计算
            // 1.如果总页数<=5
            // 2.如果当前页是前3页
            // 3.如果当前页是后3页,
            // 4.既不是前3页，也不是后3页
            var nums = [];
            if (this.total_page <= 5) {
                for (var i = 1; i <= this.total_page; i++) {
                    nums.push(i);
                }
            } else if (this.page <= 3) {
                nums = [1, 2, 3, 4, 5];
            } else if (this.total_page - this.page <= 2) {
                for (var i = this.total_page; i > this.total_page - 5; i--) {
                    nums.push(i);
                }
            } else {
                for (var i = this.page - 2; i < this.page + 3; i++) {
                    nums.push(i);
                }
            }
            return nums;
        }
    },
    mounted: function () {
        this.tag_id = this.get_query_string('id')
        axios.get(this.host + 'tag/' + this.tag_id + '/')
            .then(response => {
                this.tagDetail = response.data
            })
        axios.get(this.host + 'questions/', {
            params: {
                catalog: this.tag_id
            }
        })
            .then(response => {
                this.count = response.data.count
                this.contents = response.data.results
            })
        if (this.username) {
            this.getfocus()
        }
    },

    methods: {
        logout(){
            sessionStorage.clear();
            localStorage.clear();
            location.href = '/login.html';
        },
        // 获取url路径参数
        get_query_string: function (name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURI(r[2]);
            }
            return null;
        },
        // 请求商品数据
        get_contents: function () {
            axios.get(this.host + this.tab + '/', {
                params: {
                    catalog: this.tag_id,
                    show: this.show,
                    page: this.page,
                    page_size: this.page_size,
                },
                responseType: 'json'
            })
                .then(response => {
                    this.count = response.data.count;
                    this.contents = response.data.results;
                })
        },
        // 点击页数
        on_page: function (num) {
            if (num != this.page) {
                this.page = num;
                this.get_contents();
            }
        },
        getTab: function (e, num) {
            this.tab = num
            // console.log(this.tag)
            axios.get(this.host + this.tab + '/', {
                params: {
                    catalog: this.tag_id,
                    show: this.show
                },
                responseType: 'json'
            })
                .then(response => {
                    this.count = response.data.count;
                    this.contents = response.data.results;
                })
        },
        getShow: function (e, num) {
            this.show = num;
            // console.log(this.show)
            axios.get(this.host  + this.tab + '/', {
                params: {
                    catalog: this.tag_id,
                    show: this.show
                },
                responseType: 'json'
            })
                .then(response => {
                    this.count = response.data.count;
                    this.contents = response.data.results;
                })
        },
        getfocus: function () {
            axios.get(this.host + 'tagfocus/' + this.tag_id + '/' + this.user_id + '/', {
                // headers: {
                //     'Authorization': 'JWT ' + this.token
                // }

            })
                .then(response => {
                        this.is_focus = response.data.is_focus

                })
        },
        changefocus: function () {
            if (this.username) {
                axios.put(this.host + 'tagfocus/' + this.tag_id + '/' + this.user_id + '/',
                    // {
                    //     // headers: {
                    //     //     'Authorization': 'JWT ' + this.token
                    //     // },
                    // },
                    {
                        user : this.user_id,
                        tag : this.tag_id,
                        is_focus: !this.is_focus
                    }
                    )
                    .then(response => {
                            this.is_focus = response.data.is_focus
                        }
                    )
            } else {
                location.href = 'person-loginsign.html?next=qa-tagDetail.html'
            }
        }
    }
})

